<template>
  <div class="tar">
    <router-view>

    </router-view>
    <van-tabbar active-color="#ff6e53"
                inactive-color="#000"
                route
                v-model="active"
                @change="change">
      <van-tabbar-item to="/tar/homepage">
        <span>{{value}}</span>
        <template #icon>
          <img :src="active? icon.inactive : icon.active"
               :class="{img1 : active == 0}" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/tar/undoneOrders"
                       icon="warning-o">未完成订单</van-tabbar-item>
      <van-tabbar-item to="/tar/historyOrders"
                       icon="clock-o">历史订单</van-tabbar-item>
      <van-tabbar-item to="/tar/meView"
                       icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      icon: {
        active: 'https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1153.png',
        inactive: 'https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1152.png',
      },
      value: ''
    };
  },
  methods: {
    change () {
      if (this.active != 0) {
        this.value = '首页'
      } else {
        this.value = ''
      }
    }
  },
  created () {

  },
}
</script>
<style scoped>
.img1 {
  width: 35px;
  height: 35px;
}
</style>